<template>
  <div class="bigDiv">
    <div class="headerDiv">
      <h5>在职员工列表</h5>
    </div>
    <div class="contentDiv">
      <el-select v-model="valueType" placeholder="请选择" @change="changeOption($event)" size="mini">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span style="margin-left: 10px">
        <el-button size="small" type="danger" @click="deleTableItem()">删除</el-button>
      </span>
      <div class="rightDiv">
        <span id="title">关键字查询:</span>
        <el-input v-model="input" @input="handleValueChange" size="mini" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="tableDiv">
      <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="eid"
            label="编号"
            sortable
            width="75">
          <!--          <template slot-scope="{row}">{{ row.date }}</template>-->
        </el-table-column>
        <el-table-column
            label="姓名"
            sortable
            width="100">
          <template slot-scope="{row}"><router-link  :to="{name:'StaffInfoList',query:{staffname:row.ename,eid:row.eid}}" >{{row.ename}}</router-link></template>
        </el-table-column>
        <el-table-column
            prop="esex"
            label="性别"
            width="75"
        >
          <!--            show-overflow-tooltip>-->
        </el-table-column>
        <el-table-column
            prop="eage"
            label="年龄"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            prop="eeducation"
            label="学历"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            prop="emarriage"
            label="婚姻状况"
            width="120">
        </el-table-column>
        <el-table-column
            prop="ephone"
            label="电话"
            width="120">
        </el-table-column>
        <el-table-column
            prop="department.dname"
            label="部门"
            width="75">
        </el-table-column>
        <el-table-column
            prop="eseniority"
            label="工龄"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            prop="elevel"
            label="级别"
            sortable
            width="75">
        </el-table-column>
        <el-table-column
            label="入职表"
            width="75"
        >
          <template slot-scope="{row}">
            <el-image  style="width: 40px; height: 40px" :src="row.edesImg"  :preview-src-list="[row.edesImg]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="eidCard"
            label="身份证"
            sortable
            width="100">
        </el-table-column>
        <el-table-column
            label="操作"
            width="135">
          <template slot-scope="{row}">
            <i class="el-icon-edit" style="font-size: 15px; color:blue" @click="edit(row)"></i>
            <i class="el-icon-delete" style="font-size: 15px;color:blue;margin-left: 10px" @click="deleteRow(row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="footer-left" style="float: left;margin-left: 10px">
        当前显示{{start}}到{{end}},共{{total}}项
      </div>
      <div class="footer-right" style="float: right;margin-right: 50px">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <br>
    <br>
    <br>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
export default {
  name: "OnDutyStuffList",
  data() {
    return {
      valueType: '选项1',
      pageSize:10,
      //搜索框的值
      input:'',
      //是否在搜索页的标识
      tag:true
    }
  },
  created() {
    this.getOnDutyStaff()
  },
  computed:{
    ...mapState('AllStaff',['currentPage','options','tableData','multipleSelection','total']),
    start(){
      return (Number(this.$store.state.AllStaff.page)-1)*this.pageSize+1;
    },
    end(){
      return Number(this.$store.state.AllStaff.page)*this.pageSize;
    }
  },
  methods:{
    ...mapMutations('AllStaff',['handleSelectionChange']),
    //跳转修改界面
    edit(row){
      this.$router.push({name:'UpdateStaffInfo',query:{eid:row.eid}})
    },
    //获取所有在职员工信息
    async  getOnDutyStaff(){
      let limit=this.$store.state.AllStaff.currentPage;
      let page=this.$store.state.AllStaff.page;
      await this.$axios({
        url:`/employee/showZaiZhiEmployees/${page}/${limit}/在职`,
        method:'get'
      })
          .then((res)=>{
            this.$store.state.AllStaff.total=res.data.count
            this.$store.state.AllStaff.tableData=res.data.data
            console.log(res.data.data)
          })
    },
    //删除员工信息
    async deleteRow(row){
      //拿到点击删除的员工的id
      let eid=row.eid
      const confirmResult=await this.$confirm('确定删除该员工信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error);
      // console.log(confirmResult)
      if(confirmResult!=='confirm'){
        return this.$message.info('已取消删除')
      }else{
        const {data:res}=await this.$axios.delete(`/employee/deleteOne/${eid}`)
        if(res.msg=='删除成功'){
          this.$message.success('删除成功')
          this.getOnDutyStaff()
        }else{
          return this.$message.warning('删除失败')
        }
      }
    },
    //批量删除员工信息
    async deleTableItem(){
      let itemList=this.$store.state.AllStaff.multipleSelection
      let idList=itemList.map(item=>item.eid)
      const confirmResult=await this.$confirm('确定删除选中员工信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error);
      // console.log(confirmResult)
      if(confirmResult!=='confirm'){
        return this.$message.info('已取消删除')
      }else{
        const {data:res}=await this.$axios.delete(`/employee/deleteMany/${idList}`)
        console.log(res)
        if(res.msg=='批量删除成功'){
          this.$message.success('删除成功')
          this.getOnDutyStaff()
        }else{
          return this.$message.warning('删除失败')
        }
      }
    },
    //页码改变时触发的事件
    handleCurrentChange(val){
      this.$store.state.AllStaff.page=val;
      if(this.tag==true){
        this.getOnDutyStaff();
      }else{
        this.getsearchStaff();
      }
    },
    //改变每页显示的个数的时候触发的事件
    changeOption(e){
      let obj={};
      obj=this.$store.state.AllStaff.options.find((item)=>{
        return item.value==e;
      })
      this.$store.state.AllStaff.currentPage=obj.label;
      this.pageSize=Number(this.$store.state.AllStaff.currentPage);
      if(this.tag==true){
        this.getOnDutyStaff();
      }else{
        this.getsearchStaff();
      }
    },
    //获得模糊查询员工信息
    async getsearchStaff(){
      let limit=this.$store.state.AllStaff.currentPage;
      let page=this.$store.state.AllStaff.page;
      let message=this.input;
      await this.$axios({
        url:`/employee/showZaiZhiEmployeesByAll/${page}/${limit}/${message}/在职`,
        method:'get'
      })
          .then((res)=>{
            this.$store.state.AllStaff.total=res.data.count
            this.$store.state.AllStaff.tableData=res.data.data
            console.log(res.data.data)
          })
    },
    //搜索框发生改变的时候触发的事件
    handleValueChange(val){
      if(val=='') {
        this.tag=true
        this.getOnDutyStaff()
      }else{
        this.tag = false;
        this.getsearchStaff();
      }
    },
  }
}
</script>

<style scoped>
.tableDiv{
  width: 100%;
  padding: 10px;
}
.headerDiv{
  width: 100%;
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  outline:1px solid #cfd1d2;
}
#title{
  font-size: 12px;
  margin-right: 7px;
}
.contentDiv{
  padding:10px ;
}
.rightDiv{
  float: right;
  margin-right: 50px;
}
.bigDiv{
  width: 1300px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.el-input--mini{
  width: 190.8px;
  height: 30px;
}
.el-select{
  width: 73px;
  height: 30px;
}
.footer{
  width: 100%;
  height: 34px;
  line-height: 34px;
}
</style>